import { h } from 'vue';
import { ElInput, ElTable, ElTableColumn } from 'element-plus';
let emit;

const createColum = option => {
  const { group = [], header, render, format, type, ...config } = option;
  if (group.length) {
    return <ElTableColumn {...config}>{group.map(i => createColum(i))}</ElTableColumn>;
  }
  const slots: any = {};
  if (format) slots.default = scope => format(scope);
  if (header) slots.header = scope => header(h, scope);
  if (render) slots.default = scope => render(h, scope);
  return <ElTableColumn {...config}>{slots}</ElTableColumn>;
};

export default (props, ctx) => {
  const { columns, handler, data, ...attrs } = props;
  return (
    <ElTable {...attrs} data={handler ? handler(data) : data}>
      {columns.map(createColum)}
    </ElTable>
  );
};
